<template>
	<view class="p-30 fl-s-s">
		<view class="bg-ff br-20 p-30 w-1">
			<view class="fr-s-c">
				<view class="mainbar"></view>
				<text class="c-00 fs-28 m-l-10 bold">缴费单</text>
			</view>
			<view class="fr-s-c m-t-10">
				<text class="c-33 fs-28">缴费金额：</text>
				<text class="c-33 fs-36 bold">{{info.artduratime*info.numPrice+info.materprice*1}}元</text>
			</view>
			<view class="w-1 bb-solid m-t-30"></view>
			<view class="w-1 fr-b-c m-t-30">
				<text class="c-33 fs-28 bold">人工费</text>
				<text class="fs-28 c-33">{{info.artduratime}}小时</text>
				<text class="fs-28 c-33">￥{{(info.artduratime*info.numPrice).toFixed(2)*1}}</text>
			</view>
			<view class="w-1 bb-solid m-t-30"></view>
			<view class="w-1 fr-b-c m-t-30">
				<text class="c-33 fs-28 bold">材料费</text>
				<text class="fs-28 c-33">￥{{info.materprice}}</text>
			</view>
			<view class="w-1 fr-b-s warp">
				<image @click="previewImage(index,info.inventory.split(','))" style="width: 194rpx; height: 194rpx;"
					v-for="(item,index) in info.inventory.split(',')" :key="index" class="br-20 m-t-20" :src="item"
					mode="aspectFill"></image>
				<view style="width: 194rpx;"></view>
			</view>
			<view class="w-1 m-t-35 bb-solid"></view>
			<view class="w-1 fr-e-c c-33 m-t-35 fs-28 bold">
				合计：￥{{info.artduratime*info.numPrice+info.materprice*1}}
			</view>
			<view class="iphonex">
				<view class="w-1 p-30">
					<view class="big-btn" @click="sub">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	const cur = ref(0)
	const info = ref('')
	onLoad(o => {
		info.value = JSON.parse(decodeURIComponent(o.info));
		info.value.numPrice = Number(info.value.numPrice)
		console.log(info.value)
	})

	function previewImage(current, urls) {
		uni.previewImage({
			current,
			urls
		})
	}

	function sub() {
		uni.$post({
			url: '/api/Ordersystem/tocourieronorder',
			data: info.value
		}).then(res => {
			getApp().tt(res.msg, 'success')
			uni.$emit('reorder')
			uni.$emit('red2')
			uni.$delayBack(2);
		})
	}

	const fileList1 = ref([]);
	watch(fileList1, val => {
		console.log('图片val', val)
		let arr = []
		val.map(item => {
			if (item.status == 'success') {
				arr.push('/uploads/' + item.url.split('/uploads/')[1])
			}
		})
		authobj.yyzzimg = arr.join(',')
	}, {
		deep: true
	})




	// 删除图片
	const deletePic = (event) => {
		const arr = ref([]);
		switch (event.name * 1) {
			case 1:
				arr.value = fileList1.value;
				break;
			case 2:
				arr.value = fileList2.value;
				break;
			case 3:
				arr.value = fileList3.value;
				break;
		}
		arr.value.splice(event.index, 1);
	};
	// 新增图片
	const afterRead = async (event) => {
		const arr = ref([]);
		switch (event.name * 1) {
			case 1:
				arr.value = fileList1.value;
				break;
			case 2:
				arr.value = fileList2.value;
				break;
			case 3:
				arr.value = fileList3.value;
				break;
		}
		// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
		let lists = [].concat(event.file);
		let fileListLen = arr.value.length;
		lists.map((item) => {
			arr.value.push({
				...item,
				status: 'uploading',
				message: '上传中',
			});
		});
		for (let i = 0; i < lists.length; i++) {
			const result = await uploadFilePromise(lists[i].url);
			let item = arr.value[fileListLen];
			arr.value.splice(fileListLen, 1, {
				...item,
				status: 'success',
				message: '',
				url: result,
			});
			fileListLen++;
		}
	};

	const uploadFilePromise = (url) => {
		return new Promise((resolve, reject) => {
			let a = uni.uploadFile({
				url: baseUrl + '/api/Common/upload', // 仅为示例，非真实的接口地址
				filePath: url,
				name: 'file',
				header: {
					token: uni.getStorageSync('user').token
				},
				success: (res) => {
					setTimeout(() => {
						resolve(JSON.parse(res.data).data.fullurl)
					}, 1000);
				},
			});
		});
	};
</script>

<style>
	page {
		background: #f1f5f6;
	}

	.mainbar {
		width: 4rpx;
		height: 20rpx;
		background: #01796D;
		border-radius: 2rpx 2rpx 2rpx 2rpx;
	}

	.hour {
		width: 156rpx;
		height: 66rpx;
		background: #FFFFFF;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		border: 2rpx solid #E9E9E9;
		font-size: 24rpx;
		color: #3E3E3E;
	}

	.houract {
		width: 156rpx;
		height: 66rpx;
		background: #01796D;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		font-size: 24rpx;
		color: #FFFFFF;
	}

	.ibox {
		width: 686rpx;
		height: 72rpx;
		background: #FFFFFF;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		border: 2rpx solid #E9E9E9;
	}
</style>